<template>
	<view class="container">
		<view class="tui-page__hd">
			<view class="tui-page__title">Alert</view>
			<view class="tui-page__desc">警告提示</view>
		</view>
		<view class="tui-page__bd thorui-padding">
			<view class="tui-padding">
				<tui-alerts isLeft title="An info prompt"></tui-alerts>
			</view>
			<view class="tui-padding">
				<tui-alerts type="success" isLeft title="An success prompt"></tui-alerts>
			</view>
			<view class="tui-padding">
				<tui-alerts type="warn" isLeft title="An warn prompt"></tui-alerts>
			</view>
			<view class="tui-padding">
				<tui-alerts type="clear" isLeft title="An error prompt"></tui-alerts>
			</view>
			<view class="tui-padding">
				<tui-alerts isLeft title="An info prompt" desc="Content of prompt. Content of prompt."></tui-alerts>
			</view>
			<view class="tui-padding">
				<tui-alerts type="success" isLeft title="An success prompt" desc="Content of prompt. Content of prompt.">
				</tui-alerts>
			</view>
			<view class="tui-padding">
				<tui-alerts type="warn" isLeft title="An warn prompt" desc="Content of prompt. Content of prompt.">
				</tui-alerts>
			</view>
			<view class="tui-padding">
				<tui-alerts type="clear" isLeft title="An error prompt" desc="Content of prompt. Content of prompt.">
				</tui-alerts>
			</view>
			<view class="tui-padding">
				<tui-alerts title="An info prompt"></tui-alerts>
			</view>
			<view class="tui-padding">
				<tui-alerts type="success" title="An success prompt"></tui-alerts>
			</view>
			<view class="tui-padding">
				<tui-alerts type="warn" title="An warn prompt"></tui-alerts>
			</view>
			<view class="tui-padding">
				<tui-alerts type="clear" title="An error prompt"></tui-alerts>
			</view>

			<view class="tui-padding">
				<tui-alerts title="An info prompt" desc="Content of prompt. Content of prompt."></tui-alerts>
			</view>
			<view class="tui-padding">
				<tui-alerts type="success" title="An success prompt" desc="Content of prompt. Content of prompt.">
				</tui-alerts>
			</view>
			<view class="tui-padding">
				<tui-alerts type="warn" title="An warn prompt" desc="Content of prompt. Content of prompt.">
				</tui-alerts>
			</view>
			<view class="tui-padding">
				<tui-alerts type="clear" title="An error prompt" desc="Content of prompt. Content of prompt.">
				</tui-alerts>
			</view>

			<view class="tui-title">可关闭</view>
			<view class="tui-padding">
				<tui-alerts closable title="An info prompt" v-if="show" @close="close"></tui-alerts>
			</view>
			<view class="tui-padding">
				<tui-alerts type="warn" closable title="An info prompt"
					desc="Content of prompt. Content of prompt.Content of prompt.Content of prompt." v-if="showWarn"
					@close="closeWarn"></tui-alerts>
			</view>
			<view class="tui-title">自定义颜色</view>
			<view class="tui-padding">
				<tui-alerts backgroundColor="#f74d54" title="An info prompt"></tui-alerts>
			</view>
			<view class="tui-padding">
				<tui-alerts iconColor="#f74d54" backgroundColor="#fff" color="#333" title="An info prompt"></tui-alerts>
			</view>

			<view class="tui-title">自定义图标</view>
			<view class="tui-padding">
				<tui-alerts is-left title="An new message">
					<template v-slot:left>
						<image src="/static/images/my/mine_icon_help_3x.png" class="tui-icon__img" mode="widthFix">
						</image>
					</template>
				</tui-alerts>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: true,
				showWarn: true
			}
		},
		methods: {
			close() {
				this.show = false
			},
			closeWarn() {
				this.showWarn = false
			}
		}
	}
</script>

<style>
	.tui-padding {
		padding-bottom: 20rpx;
	}

	.tui-title {
		width: 100%;
		font-size: 28rpx;
		color: #888;
		padding: 30rpx 0 20rpx;
		box-sizing: border-box;
	}

	.tui-icon__img {
		width: 44rpx;
		margin-right: 20rpx;
	}
</style>
